Chapter 8: Exercises

選擇題

簡答題

  1. 請說明下列事件的發生時機：
    1. onBlur
    2. onClick
    3. onChange
    4. onError
    5. onFocus
    6. onLoad
    7. onMousedown
    8. onMouseover
    9. onMouseup
    10. onReset
    11. onScroll
    12. onSelect
    13. onSubmit
    14. onUnload
  2. 請說明下列與滑鼠相關事件的發生時機：
    1. onMouseDown
    2. onMouseOver
    3. onMouseOut
    4. onMouseUp
    5. onClick
    6. onDblClick
  3. 請說明下列與鍵盤相關事件的發生時機：
    1. onKeyDown
    2. onKeyPress
    3. onKeyUp
  4. 使用 body 標籤的什麼屬性，可以達到「送往迎來」的功能？
  5. 使用 body 標籤的什麼屬性，可以產生「打不死的蟑螂」的網頁？
  6. 遇到「打不死的蟑螂」網頁，除了從工作管理員來砍除瀏覽器之外，還有什麼方法可以終止這個網頁？
  7. 我們可以使用 document 的哪一項性質來偵測「按鍵事件」？
  8. 我們可以使用 event 的哪一項性質來知道按鍵代碼？
  9. 請說明 event.shiftKey、event.ctrlKey、event.altKey 的功能。
  10. 請說明在 input 標籤中，onKeyDown、onKeyPress 和 onKeyUp 事件的發生時機。
  11. 請說明 event.clientX 及 event.clientY 的意義。
  12. 請說明 event.button 的意義。

程式題

請使用本章所學到的 JavaScript 程式技巧來完成下列作業：
  1. (**) 突變的蟑螂: 請改進本章的範例「打不死的蟑螂」，使這隻突變蟑螂越來越厲害：
    1. 請找一張蟑螂的圖，在網頁上秀出出它的真面目。（如果你討厭蟑螂，可以換另一個動物的影像。）
    2. 蟑螂會在網頁內到處亂跑。（蟑螂不會轉彎沒關係，但要跑得像蟑螂！）
    3. 蟑螂不但會跑，還會長大，每開一張新視窗，蟑螂就長大 50%！（是蟑螂長大，不是網頁長大喔...）
    （提示：可在網址附加井字號，以將蟑螂大小傳送到下一個網頁，例如 xyz.htm#300，然後再使用 JavaScript 的 location.hash 來取出 #300，以改變蟑螂大小。當然，你也可以使用後面會教到的 Cookie 來完成此作業。）
  2. (**) 按鍵連到清大首頁之一: 請寫一個網頁，網頁上面載明此網頁的功能：「當使用者按下 Ctrl（按後不放），再連續按下（按後即放） n, t, h, u 四個英文字母之後，瀏覽器會顯示清大首頁。」
  3. (**) 按鍵連到清大首頁之二: 請重複上題，但將 Ctrl 鍵改為 Shift 鍵。
  4. (**) 按鍵連到清大首頁之三: 請重複上題，但將 Ctrl 鍵改為 Alt 鍵。（如果無法達到相同效果，請說明原因。）
  5. (***) 腦力激盪題：按鍵模擬: 請寫一個網頁，能讓使用者使用不同的按鍵來模擬預設按鍵的功能：
    • 使用「向右箭頭」鍵來模擬「Tab」鍵的功能。
    • 使用「向左箭頭」鍵來模擬「Shift+Tab」鍵的功能。
  6. (***) 小遊戲: 請利用本章及前述幾章所介紹的 JavaScript 功能（請勿使用 Java 來完成此作業），來寫一些以文字為主的小遊戲：
    1. 擲骰子填空遊戲。（有四個未知的二位數，共有八個空格，你要經由擲骰子來決定這八個數字。換句話說，你要擲骰子八次，每擲完一次，就要將點數填入一個空格，直到填完為止。將這四個二位數相加，總和若大於 150，則你的分數為零，若總和小於或等於 150，總和即是你的分數。）
    2. 井字遊戲（tic-tac-toe）
    3. 圍小貓遊戲（玩看看！）或其他類似的概念
    4. 貪食蛇遊戲：（不好描述，應該大家都玩過吧？）
    5. 猜數字遊戲：由電腦亂數產生一個四位數，使用者輸入所猜的數字，電腦回覆「xAyB」，其中 x 代表「位置對且數值對的個數」，y 代表「位置不對但數值對的個數」，如此反覆進行，直到使用者猜出電腦原先設定的數值。（每次使用者輸入一組數值後，電腦應將結果紀錄於動態表單或文字區域，以便使用者反覆查看之前的輸入和結果。若猜十次還沒猜到，電腦就直接公布謎底。）
    6. 21點, Black Jack（Wikipedia: Chinese, English）
    7. 數獨遊戲
    8. 俄羅斯方塊
    9. 孔明棋
    10. 五子棋（需要電腦有AI基礎的對奕能力，可能比較困難。）
    11. 黑白棋（需要電腦有AI基礎的對奕能力，可能比較困難。）
    12. 其他可能的小遊戲，但請把握下列原則：
      • 要說明遊戲的規則。
      • 以 JavaScript 來完成，要能展現 JavaScript 能發揮的功能特色。
      • 只是小遊戲，不要鋪陳，以免浪費太多時間。

      Hint
      若有其他適合 JavaScript 實作之小遊戲，麻煩讀者來信告知，謝謝！

JavaScript 程式設計與應用：用於網頁用戶端